// pages/canvas_sound/canvas_sound.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    width:0,
    height:200,
    tiao_height:[],
    setinteNum:'',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取页面的width
    wx.getSystemInfo({
      success:(res)=>{
        this.setData({
          width:res.screenWidth
        })
      }
    })
    for(let i=0;i<parseInt(this.data.width/16);i++){
      this.data.tiao_height.push({height:parseInt(Math.random()*120+10)});
    }
    this.setData({
      tiao_height:this.data.tiao_height
    })

    this.setinte();
  },

  jixu(){
    this.setinte();
  },
  zanting(){
    clearInterval(this.data.setinteNum);
  },
  setinte(){
    this.data.setinteNum = setInterval(() => {
      this.data.tiao_height.shift();//删除数组第一项
      this.data.tiao_height.push({height:parseInt(Math.random()*120+10)});
      this.setData({
        tiao_height:this.data.tiao_height
      })
    }, 200);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.canvasHua("myCanvas");
  },

  // canvas画布
  canvasHua(id){
    const query = wx.createSelectorQuery()
    query.select("#"+id)
    .fields({ node: true, size: true })
    .exec((res) => {
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')

      const dpr = wx.getSystemInfoSync().pixelRatio
      canvas.width = res[0].width * dpr
      canvas.height = res[0].height * dpr
      ctx.scale(dpr, dpr)
      // 渲染、
      setInterval(() => {
        this.reace(ctx);
      }, 100);
    })
  },

  reace(ctx){
    // 清空画布
    ctx.clearRect(0,0,this.data.width,this.data.height);
    for(let i=0;i<60;i++){
      var height=parseInt(Math.random()*50+10);
      this.darwRoundRect(i*12,(this.data.height-height)/2,4,height,3,ctx,"rgba(101, 131, 188,1)");
    }
  },
  /**
   * 绘制圆角矩形
   * @param {*} x 起始点x坐标 
   * @param {*} y 起始点y坐标
   * @param {*} w 矩形宽
   * @param {*} h 矩形高
   * @param {*} r 圆角半径
   * @param {*} ctx 画板上下文
   */
  darwRoundRect(x, y, w, h, r, ctx,color) {
    ctx.save()
    ctx.beginPath()

    // 左上弧线
    ctx.arc(x + r, y + r, r, 1 * Math.PI, 1.5 * Math.PI)
    // 左直线
    ctx.moveTo(x, y + r)
    ctx.lineTo(x, y + h - r)
    // 左下弧线
    ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, 1 * Math.PI)
    // 下直线
    ctx.lineTo(x + r, y + h)
    ctx.lineTo(x + w - r, y + h)
    // 右下弧线
    ctx.arc(x + w - r, y + h - r, r, 0 * Math.PI, 0.5 * Math.PI)
    // 右直线
    ctx.lineTo(x + w, y + h - r)
    ctx.lineTo(x + w, y + r)
    // 右上弧线
    ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI)
    // 上直线
    ctx.lineTo(x + w - r, y)
    ctx.lineTo(x + r, y)

    ctx.fillStyle=color
    ctx.fill()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})